<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人资料 - 迈浪心理</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="user-center.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <header class="header">
            <div class="logo">
                <svg width="160" height="40" viewBox="0 0 160 40">
                    <path d="M20 5 C15 15, 10 25, 5 35 S25 35, 30 25 S35 15, 40 5" fill="none" stroke="#4a90e2"
                        stroke-width="2" />
                    <text x="45" y="28" font-family="Microsoft YaHei" font-size="24" fill="#333">迈浪心理</text>
                </svg>
            </div>
            <nav class="nav">
                <a href="index.html" class="nav-item" @click="goToPage('index')">网站首页</a>
                <a href="consultation.html" class="nav-item" @click="goToPage('consultation')">心理咨询</a>
                <a href="therapist.html" class="nav-item" @click="goToPage('therapist')">心理咨询师</a>
                <a href="about.html" class="nav-item" @click="goToPage('about')">关于我们</a>
                <a href="user-center.html" class="nav-item" @click="goToPage('user-center')">个人中心</a>
                <a href="#" class="nav-item login-btn">登录</a>
            </nav>
        </header>

        <main class="user-main">
            <div class="container">
                <div class="user-layout">
                    <!-- 侧边导航 -->
                    <aside class="user-sidebar">
                        <div class="user-card">
                            <img :src="user.avatar" :alt="user.name" class="user-avatar">
                            <h3>{{ user.name }}</h3>
                            <p>{{ user.email }}</p>
                        </div>
                        <nav class="user-nav">
                            <a href="user-center.html" class="nav-item">
                                <span class="nav-icon">👤</span>
                                <span>个人中心</span>
                            </a>
                            <a href="user-appointments.html" class="nav-item">
                                <span class="nav-icon">📅</span>
                                <span>我的预约</span>
                            </a>
                            <a href="user-records.html" class="nav-item">
                                <span class="nav-icon">📝</span>
                                <span>咨询记录</span>
                            </a>
                        </nav>
                    </aside>

                    <!-- 主内容区 -->
                    <div class="content-main">
                        <div class="content-header">
                            <h2>个人资料</h2>
                        </div>

                        <div class="profile-form">
                            <div class="avatar-section">
                                <img :src="user.avatar" :alt="user.name" class="profile-avatar">
                                <button class="upload-btn" @click="uploadAvatar">更换头像</button>
                            </div>

                            <div class="form-section">
                                <div class="form-group">
                                    <label>姓名</label>
                                    <input type="text" v-model="user.name" placeholder="请输入姓名">
                                </div>
                                <div class="form-group">
                                    <label>性别</label>
                                    <select v-model="user.gender">
                                        <option value="male">男</option>
                                        <option value="female">女</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>手机号码</label>
                                    <input type="tel" v-model="user.phone" placeholder="请输入手机号码">
                                </div>
                                <div class="form-group">
                                    <label>电子邮箱</label>
                                    <input type="email" v-model="user.email" placeholder="请输入电子邮箱">
                                </div>
                                <div class="form-group">
                                    <label>出生日期</label>
                                    <input type="date" v-model="user.birthday">
                                </div>
                                <div class="form-group">
                                    <label>个人简介</label>
                                    <textarea v-model="user.bio" rows="4" placeholder="请输入个人简介"></textarea>
                                </div>
                            </div>

                            <div class="form-actions">
                                <button class="save-btn" @click="saveProfile">保存修改</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    <script src="js/user-profile.js"></script>
</body>

</html>